var React = require('react');

var Header = require('../widget/Header');
var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var MsgBox = require('../components/MsgBox');
var ShopPro = require('../components/ShopPro');
var IncreaseId = require('../../web/tools/IncreaseId');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon');
var AttrContent = require('../widget/AttrContent');

module.exports = React.createClass({
    getInitialState: function () {
        this.itemsChanged = false;
        return {
            theme: "Default", //Default/Blue
            limit: 0,
            items: [],
            oldItems: [],
            flag: true,
            goods_id: "",
            hact: "#",//地址
            pullUpFlag: false,
            plan:this.props.params.plan,//0默认为首页,1为分类页
            id:this.props.params.id,
            banner:[],
        }
    },
    myScroll:"",
    componentDidMount: function () {
        this.init();
        this.getGoodsList(0);
        setTimeout(this.iscroll,500);
    },
    /**初始化判断*/
    init(){
        var p=this;
        if(p.state.plan==0){
            p.getHomePageBanner();
            localStorage.back="#"
        }else{
            p.getFenleiBanner();
            localStorage.back="#fenlei"
        }
    },
    componentDidUpdate() {
        var p=this;
        // 仅当列表发生了变更，才调用iscroll的refresh重新计算滚动条信息
        if (this.itemsChanged) {
            setTimeout(function () {
                p.myScroll.refresh();
            }, 0);
        }
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        var options = {
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        };
        p.myScroll = new IScroll("#ScrollContainer",options);
        p.myScroll.on("scroll", p.onScroll);
        p.myScroll.on("scrollEnd", p.onScrollEnd);
    },
    onScroll() {
        // 下拉区域
        if (this.myScroll.y <= this.myScroll.maxScrollY + 5) {
            this.onPullUp();
        }
    },
    onScrollEnd() {
        var p=this;
        // 滑动结束后，停在加载区域
        if (p.myScroll.y <= p.myScroll.maxScrollY) {
            // 发起了加载，那么更新状态
            var limit = p.state.limit;
            limit = limit + 6;
            p.setState({limit:limit,pullUpFlag:true},()=>{
                p.itemsChanged = true;
                setTimeout(function(){
                    p.getGoodsList(limit);
                },1500);
            });
        }
    },
    /**获取功能列表*/
    getFenleiBanner(){
        var p = this;
        ajax("POST","getProductCate",{id:p.state.id},function(dt){
            if(dt && dt.success){
                var obj = dt.data[0];
                console.log(obj);
                p.setState({banner:obj});
            }
        });
    },
    getHomePageBanner(){
        var p=this;
        ajax("POST","getBanner",{id:p.state.id},function(dt){
            if(dt && dt.success){
                var obj = dt.data[0];
                console.log(obj);
                p.setState({banner:obj});
            }
        });
    },
    /**获取商品信息*/
    getGoodsList(limit){
        var p =this;
        p.setState({pullUpFlag:false});
        if(limit !=0){
            limit = p.state.limit;
        }
        ajax("POST","getGoodsList",{limit:limit,id:p.state.id,plan:p.state.plan},function(dt){
            if(dt.data.length > 0 && dt.success){
                var objs = dt.data;
                console.log(objs);
                var items = p.state.items;
                var oldItems = p.state.oldItems;
                if(oldItems.length>0){
                    if(objs[0].id !== oldItems[0].id){
                        for(var i=0;i<objs.length;i++){
                            items.push(objs[i]);
                        }
                    }
                }else{
                    items = objs;
                }
                p.setState({items:items,oldItems:objs});
                if(p.myScroll){
                    p.myScroll.refresh();
                }
            }else{
                p.refs.MsgBox.setState({
                    type: "no",
                    timeout:750,
                    show:true,
                    word:"已经到底了"
                })
            }
        });
    },
    /**商品详情*/
    proInfo: function (e){
        var action = e.currentTarget.getAttribute("action");
        var id = e.currentTarget.getAttribute("data-id");
        var price = e.currentTarget.getAttribute("data-price");
        localStorage.setItem("back","#shop_pro/"+this.state.plan+"/"+this.state.id);
        localStorage.setItem("price",price);
        location.href = "#goodDetail/"+id;
    },
    render: function () {
        var p = this;
        var objs = p.state.items;
        var odd = [];
        var even = [];
        for(var i = 0;i <objs.length;i++){
            if(i%2 == 0){
                odd.push(objs[i]);
            }else{
                even.push(objs[i]);
            }
        }
        var shoplist_l = odd.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.proInfo} data-id={obj.id} data-shop-id={obj.shop_id} data-name={obj.goods_name} data-number={obj.goods_number} data-price={obj.ProPrice}>
                    <div className="pic">
                        <img src={goods_img} />
                    </div>
                    <div className="shop_pro">
                        <p className="pname" ref="goodname">{obj.goods_name}</p>
                        <p className="p_des">{obj.goods_desc}</p>
                        <span className="p_des" ref="goodnumber">{obj.goods_number}</span><span className="p_des">件</span>
                    </div>
                    <div className="spro_con">
                        <div className="pro_country">

                        </div>
                        <div className="pro_price">
                            <span ref="goodprice">{obj.ProPrice}</span><span>元</span>
                        </div>
                        <div className="pro_addcart">
                            <Icon icon="#icon-gouwuche-tianjia"></Icon>
                        </div>
                    </div>
                </div>
            )
        });
        var shoplist_r = even.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.proInfo} data-id={obj.id} data-shop-id={obj.shop_id} data-name={obj.goods_name} data-number={obj.goods_number} data-price={obj.ProPrice}>
                    <div className="pic">
                        <img src={goods_img} />
                    </div>
                    <div className="shop_pro">
                        <p className="pname" ref="goodname">{obj.goods_name}</p>
                        <p className="p_des">{obj.goods_desc}</p>
                        <span className="p_des" ref="goodnumber">{obj.goods_number}</span><span className="p_des">件</span>
                    </div>
                    <div className="spro_con">
                        <div className="pro_country">

                        </div>
                        <div className="pro_price">
                            <span ref="goodprice">{obj.ProPrice}</span><span>元</span>
                        </div>
                        <div className="pro_addcart">
                            <Icon icon="#icon-gouwuche-tianjia"></Icon>
                        </div>
                    </div>
                </div>
            )
        });
        return (
            <div className="main"  id="main">
                <Bheader  ref="bheader" theme={p.state.theme} title={p.state.banner.name} hact="#"></Bheader>
                <div id="ScrollContainer" onScroll={this.handleScroll}>
                    <div className="shopProWrap">
                        <div id="fenClassPro">
                            <div id="fenClassProImg">
                                <img src={p.state.banner.topImg} />
                            </div>
                        </div>
                        <p className="blankSet"></p>
                        <div className="pro">
                            <div className="pro-left">
                                {shoplist_l}
                            </div>
                            <div className="pro-right">
                                {shoplist_r}
                            </div>
                        </div>
                        <div className="pullUp" style={{visibility:p.state.pullUpFlag?"visible":"hidden"}}>
                            <div className="refresh loading"></div>
                        </div>
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});
